<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <!-- 表单项 start -->
      <el-form-item label="分组名称" prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" placeholder="请输入分组名称，例如 [ 电池信息，操作系统 ]"></el-input>
      </el-form-item>
      <!-- 表单项 end -->
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate" :loading="loading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import updateMixins from "@/views/base/updateMixins";

// 请求接口 start
import productApi from "@/api/productApi";
// 请求接口 end

export default {
  // 组件名称 start
  name: "productGroupUpdate",
  // 组件名称 end

  props: ["dialogTitle"],
  mixins: [updateMixins],
  data() {
    return {
      // 表格数据及校验规则 start
      initForm: {
        name: "",
      },
      form: {
        name: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 之间",
            trigger: "blur",
          },
        ]
      },
      // 表格数据及校验规则 end
    };
  },
  methods: {
    // 数据详情 start
    remoteData(row) {
      productApi.group
        .info(row.id)
        .then((res) => {
          this.form = res.data;
          this.form.sort = null;
        })
        .catch((error) => {});
    },
    // 数据详情 end

    saveOrUpdate() {
      // 新增或编辑 start
      this.$refs["ruleForm"].validate((valid) => {
        var params = { ...this.form, ...this.meta };
        if (valid) {
          this.showLoading(true);
          if (!this.form.id) {
            productApi.group
              .save(params)
              .then((res) => {
                this.showDialog(false);
                this.$parent.resetGroupList();
              })
              .catch((error) => {
                this.showLoading(false);
              });
          } else {
            productApi.group
              .update(params)
              .then((res) => {
                this.showDialog(false);
                this.$parent.resetGroupList();
              })
              .catch((error) => {
                this.showLoading(false);
              });
          }
        }
      });
      // 新增或编辑 end
    },
  },
};
</script>

<style lang="less" scoped>
.el-dialog__wrapper {
  /deep/.el-dialog {
    .el-dialog__body {
      padding: 30px 30px;
    }
    .el-dialog__footer {
      padding: 10px 30px 30px 20px;
    }
  }
}
</style>